<template>
  <section class="capsule-figure">
    <section class="set-cards">
      <el-collapse accordion>
        <el-collapse-item style="border-bottom:1px solid #ececec;margin-bottom:5px;">
          <template slot="title">
            胶囊图配置
            <el-tag
              size="mini"
            >{{
              loadingAndUpdateTimeInfo.DAILY_FOCUS_CAPSULE_IMG.updateTime
                ? "上次设置时间：" +
                  loadingAndUpdateTimeInfo.DAILY_FOCUS_CAPSULE_IMG.updateTime
                : "未设置"
            }}
            </el-tag>
          </template>
          <section class="card-inner">
            <div
              class="course-category-add"
              @click="handleAdd"
            >
              新增胶囊图
            </div>
            <el-form
              style="margin-top: 20px"
              :model="homeConfig.DAILY_FOCUS_CAPSULE_IMG"
              label-position="right"
              label-width="130px"
            >
              <el-table
                :data="homeConfig.DAILY_FOCUS_CAPSULE_IMG.configValue"
                stripe
                style="width: 100%"
              >
                <el-table-column header-align="center" label="序号" width="120px">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.sort"
                      class="edit-input"
                      size="small"
                      oninput="value=value.replace(/[^0-9]/g,'');if (value.length>9)value = value.slice(0,9)"
                      style="width: 100%;"
                    />
                  </template>
                </el-table-column>
                <el-table-column header-align="center" label="胶囊图图片" width="330px">
                  <template slot-scope="scope">
                    <el-button v-if="!scope.row.pic" style="width: 100%;" type="text" @click="startUpload(scope,1)">点击上传图片</el-button>
                    <div v-else class="inner-image">
                      <el-image :src="scope.row.pic" :preview-src-list="[scope.row.pic]" />
                    </div>
                    <Upload
                      v-if="choosePic === '1'"
                      ref="upload"
                      :accept="uploadFile.accept"
                      :limit="1"
                      :show-chunks="true"
                      :multiple="false"
                      :chunk-size="uploadFile.chunksize"
                      @close="choosePic = '-1'"
                      @success="uploadSuccess"
                    />
                  </template>
                </el-table-column>
                <el-table-column header-align="center" label="跳转地址类型" width="200px">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.type" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column header-align="center" label="跳转地址链接">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.url"
                      class="edit-input"
                      size="small"
                    />
                  </template>
                </el-table-column>

                <el-table-column header-align="center" label="操作" width="80px">
                  <template slot-scope="scope">
                    <el-button
                      size="small"
                      type="text"
                      @click="delContectItem(scope.$index, scope.row,'DAILY_FOCUS_CAPSULE_IMG')"
                    >删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                :loading="
                  loadingAndUpdateTimeInfo.DAILY_FOCUS_CAPSULE_IMG.loading
                "
                style="display: block; margin: 10px auto"
                type="primary"
                @click="handleComit('DAILY_FOCUS_CAPSULE_IMG')"
              >确 定
              </el-button>
            </el-form>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
    <section class="set-cards">
      <el-collapse accordion>
        <el-collapse-item style="border-bottom:1px solid #ececec;margin-bottom:5px;">
          <template slot="title">
            重点内容配置
            <el-tag
              size="mini"
            >{{
              loadingAndUpdateTimeInfo.DAILY_FOCUS_CONTENT.updateTime
                ? "上次设置时间：" +
                  loadingAndUpdateTimeInfo.DAILY_FOCUS_CONTENT.updateTime
                : "未设置"
            }}
            </el-tag>
          </template>
          <section class="card-inner">
            <div
              class="course-category-add"
              @click="handleAdd('DAILY_FOCUS_CONTENT')"
            >
              新增重点内容
            </div>
            <el-form
              style="margin-top: 20px"
              :model="homeConfig.DAILY_FOCUS_CONTENT"
              label-position="right"
              label-width="130px"
            >
              <el-table
                :data="homeConfig.DAILY_FOCUS_CONTENT.configValue"
                align="center"
                stripe
                style="width: 100%"
              >
                <el-table-column header-align="center" label="序号" width="120px">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.sort"
                      class="edit-input"
                      size="small"
                      oninput="value=value.replace(/[^0-9]/g,'');if (value.length>9)value = value.slice(0,9)"
                      style="width: 100%;"
                    />
                  </template>
                </el-table-column>
                <el-table-column header-align="center" label="重点内容图片" width="330px">
                  <template slot-scope="scope">
                    <el-button v-if="!scope.row.pic" style="width: 100%;" type="text" @click="startUpload(scope,2)">点击上传图片</el-button>
                    <div v-else class="inner-image-last">
                      <el-image :src="scope.row.pic" :preview-src-list="[scope.row.pic]" />
                    </div>
                    <Upload
                      v-if="choosePic === '2'"
                      ref="upload"
                      :accept="uploadFile.accept"
                      :limit="1"
                      :show-chunks="true"
                      :multiple="false"
                      :chunk-size="uploadFile.chunksize"
                      @close="choosePic = '-1'"
                      @success="uploadSuccess"
                    />
                  </template>
                </el-table-column>
                <el-table-column header-align="center" label="跳转地址类型" width="200px">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.type" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column header-align="center" label="跳转地址链接">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.url"
                      class="edit-input"
                      size="small"
                    />
                  </template>
                </el-table-column>

                <el-table-column header-align="center" label="操作" width="80px">
                  <template slot-scope="scope">
                    <el-button
                      size="small"
                      type="text"
                      @click="delContectItem(scope.$index, scope.row,'DAILY_FOCUS_CONTENT')"
                    >删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                :loading="
                  loadingAndUpdateTimeInfo.DAILY_FOCUS_CONTENT.loading
                "
                style="display: block; margin: 10px auto"
                type="primary"
                @click="handleComit('DAILY_FOCUS_CONTENT')"
              >确 定
              </el-button>
            </el-form>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
  </section>
</template>

<script>
import { getDataByType, setDataByType } from '@/views/config/pagestyle/api'
import Upload from './upload'

export default {
  name: 'CapsuleFigure',
  components: { Upload },
  data() {
    return {
      uploadFile: {
        showUpload: false,
        accept: 'image/*',
        chunksize: 10 * 1024 * 1024,
        file: '',
        oldfile: ''
      },
      editRowIndex: 0, // 当前编辑的联系我们索引值
      imgType: '',
      options: [
        {
          value: '1',
          label: '站内地址'
        },
        {
          value: '2',
          label: '站外地址'
        }
      ],
      choosePic: '-1',

      homeConfig: {
        DAILY_FOCUS_CAPSULE_IMG: {
          configValue: []
        },
        DAILY_FOCUS_CONTENT: {
          configValue: []
        }
      },
      loadingAndUpdateTimeInfo: {
        // 胶囊图配置
        DAILY_FOCUS_CAPSULE_IMG: {
          loading: false,
          updateTime: ''
        },
        DAILY_FOCUS_CONTENT: {
          loading: false,
          updateTime: ''
        }
      }

    }
  },
  created() {
    for (const key in this.homeConfig) {
      const isParse = typeof this.homeConfig[key].configValue === 'object'
      this.getSystemData(key, isParse)
    }
  },
  methods: {
    /**
     * 上传文件
     */
    uploadSuccess(id, files, data) {
      if (this.imgType === 1) {
        this.homeConfig.DAILY_FOCUS_CAPSULE_IMG.configValue[this.editRowIndex].pic = data.ossPath
      } else {
        this.homeConfig.DAILY_FOCUS_CONTENT.configValue[this.editRowIndex].pic = data.ossPath
      }
      this.handleClose()
    },
    /**
     * 点击上传图片
     */
    startUpload(info, type) {
      this.imgType = type
      this.editRowIndex = info.$index
      if (this.imgType === 1) {
        this.choosePic = '1'
      } else if (this.imgType === 2) {
        this.choosePic = '2'
      }
    },
    /**
     * 关闭弹框
     */
    handleClose() {
      this.choosePic = '-1'
    },
    /**
     * 添加配置
     */
    handleAdd(type) {
      if (type === 'DAILY_FOCUS_CONTENT') {
        this.homeConfig.DAILY_FOCUS_CONTENT.configValue.push({ sort: '', pic: '', type: '', url: '' })
      } else {
        this.homeConfig.DAILY_FOCUS_CAPSULE_IMG.configValue.push({ sort: '', pic: '', type: '', url: '' })
      }
    },
    /**
     * 删除
     */
    delContectItem(index, item, type) {
      if (item.sort === '' || item.pic === '' || item.type === '' || item.url === '') {
        if (type === 'DAILY_FOCUS_CAPSULE_IMG') {
          this.homeConfig.DAILY_FOCUS_CAPSULE_IMG.configValue.splice(index, 1)
          return
        } else if (type === 'DAILY_FOCUS_CONTENT') {
          this.homeConfig.DAILY_FOCUS_CONTENT.configValue.splice(index, 1)
          return
        }
        return
      }
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (type === 'DAILY_FOCUS_CONTENT') {
            this.homeConfig.DAILY_FOCUS_CONTENT.configValue.splice(index, 1)
          } else {
            this.homeConfig.DAILY_FOCUS_CAPSULE_IMG.configValue.splice(index, 1)
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
        })
    },
    /**
     * 获取详情
     */
    getSystemData(type, isParse = false) {
      return new Promise((resolve, reject) => {
        getDataByType({
          name: type
        })
          .then((res) => {
            try {
              this.homeConfig[type].configValue = isParse
                ? JSON.parse(res.data.data.configValue)
                : res.data.data.configValue
              this.loadingAndUpdateTimeInfo[type].updateTime =
                    res.data.data.updTime
            } catch (error) {}
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    /**
     * 保存
     * @param type
     * @returns {Promise<unknown>}
     */
    handleComit(type) {
      const name = type
      let value
      const isParse = typeof this.homeConfig[type].configValue === 'object'
      value = this.homeConfig[type].configValue
      value = isParse ? JSON.stringify(value) : value
      const valueArr = JSON.parse(value)
      for (const key in valueArr) {
        const arr = valueArr[key]
        for (const i in arr) {
          if (arr[i] === '') {
            this.$message({
              message: '请先完成内容填写再提交',
              type: 'warning'
            })
            return
          }
        }
      }
      this.loadingAndUpdateTimeInfo[type].loading = true
      return new Promise((resolve, reject) => {
        setDataByType({
          configName: name,
          configValue: value
        })
          .then((res) => {
            this.loadingAndUpdateTimeInfo[type].loading = false
            this.$message({
              title: '成功',
              message: '设置成功',
              type: 'success',
              duration: 1500
            })

            this.getSystemData(type, isParse)
          })
          .catch((e) => {
            this.loadingAndUpdateTimeInfo[type].loading = false
            reject(error)
          })
      })
    }
  }
}
</script>

<style lang="scss">
.capsule-figure {
  .set-cards {

    .el-collapse {
      border-top: none;
      border-bottom: none;

      .el-collapse-item__header {
        padding-left: 10px;
        border-bottom: none;
        overflow: hidden;
        text-overflow: ellipsis;

        .el-tag {
          margin-left: 10px;
        }

        .name {
          flex-shrink: 0;
          white-space: nowrap;
        }
      }

      .el-collapse-item__content {
        padding: 10px;
      }

      .el-collapse-item__wrap {
        border-bottom: none;
        border-top: 1px solid #e6ebf5;
      }
    }
  }

  .set-cards {
    //margin-top: 10px;

    .news-item {
      border-bottom: 1px solid #f7f7f8;
      line-height: 35px;

      &:last-child {
        border-bottom: none;
      }
    }

    .news-add {
      cursor: pointer;
      width: 100%;
      line-height: 40px;
      text-align: center;
      border: 1px dotted #e5e5e5;

      &:hover {
        @include border-color(1px, dotted, $mainColor);
        @include font-color($mainColor);
      }
    }

    .course-category-add {
      cursor: pointer;
      width: 180px;
      line-height: 40px;
      text-align: center;
      border: 1px dotted #e5e5e5;
      font-size: 14px;
      @include border-color(1px, dotted, $mainColor);
      @include font-color($mainColor);

      &.course {
        display: inline-block;

        &:last-child {
          margin-left: 20px;
        }
      }
    }

    .course-category-table {
      margin-top: 10px;
    }

    .select-course-category {
      .el-col {
        margin-bottom: 10px;
        &.drag-item {
          position: relative;
          .course-category-origin {
            position: absolute;
            right: 70px;
            top: 50%;
            transform: translateY(-50%);
          }
          .el-input__inner {
            padding-right: 40px;
          }
        }
      }
    }
  }

  .set-info {
    .info-item {
      padding-bottom: 8px;
      vertical-align: top;
      display: flex;

      .item-label {
        color: rgba(0, 0, 0, 1);
        font-weight: 400;
        font-size: 14px;
        line-height: 1.5715;
        text-align: start;
      }

      .item-content {
        flex: 1 1;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        line-height: 1.5715;
        word-break: break-word;
        overflow-wrap: break-word;
      }
    }
  }
  .inner-explain {
    margin-top: 10px;
    line-height: 1.1;
    color: #999;
    font-size: 14px;
    display: flex;
    align-items: flex-start;

    > i {
      margin-right: 5px;
    }

    p {
      margin: 0;
      padding: 0;
      margin-bottom: 5px;
    }
  }
  .cg-dialog {
    .el-dialog .el-dialog__body {
      padding: 0 !important;
    }
  }
  .card-inner{
    .inner-draggable {
      display: flex;
      justify-content: space-around;
      flex-direction: row;
      align-items: flex-start;

      .draggable-item {
      }
    }
    .inner-image{
      width:100%;
      text-align: center;
      .el-image{
        height: 60px;
        max-width:100%;
      }
    }
    .inner-image-last{
      width: 100%;
      text-align: center;
      .el-image{
        height: 150px;
        max-width: 100%;
      }
    }
    .el-select{
      width: 100%;
    }
  }
  .inner-txt {
    text-align: center;
    padding: 10px 0;
  }
  .el-tag {
    white-space: nowrap;
    max-width: 900px;
    text-overflow: ellipsis;
    overflow:hidden;
  }
}
</style>
